<template>
    <div class="property">
        <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
        <div class="readonly_flag" :class="readonly ? 'readonly_true' : ''">
            <textarea :value="textStr" @change="inputHandler($event)" @keydown.enter="inputHandler($event)"></textarea>
        </div>
        <div class="checkbox1">
        <div v-if="!readonly && defaultValue !== undefined && stringRef !== defaultValue" class="checkbox"
            @click.stop.prevent="resetDefult" @mouseover="mouseFlag = true" @mouseout="mouseFlag = false">
            <es-icon :name="'huaban'" :color="mouseFlag ? 'rgba(230, 230, 230, 1)' : 'rgba(230, 230, 230, 0.4)'"
                :size="14" />
        </div></div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, watch, ref } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';

import { PropertyCompCallbackFuncParamsType } from "./base";

const props = withDefaults(defineProps<{
    property: any
}>(), {
});
const emits = defineEmits<{
    (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();


const mouseFlag = ref(false)
const resetDefult = () => {
    stringRef.value = defaultValue
}
const { property } = props;
const readonly = property.readonly;
const disposer = createVueDisposer(onBeforeUnmount);
const textStr = ref()
const stringRef = toVR<string | undefined>(disposer, property.reactVar, s => s && s as string)
const defaultValue = property.defaultValue
const inputHandler = (e: any) => {
    textStr.value = e.target.value
}
watch(stringRef, (val) => {
    textStr.value = val ?? property.defaultValue
}, { immediate: true })
watch(textStr, (val) => {
    stringRef.value = val
}, { immediate: true })
</script>
<style scoped>
textarea {
    width: 100%;
    min-height: 110px;
    height: auto;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid #3b3c40;
    color: rgba(230, 230, 230, 1);
    padding-left: 11px;
    box-sizing: border-box;
    resize: none;
    word-wrap: break-word;
    outline: none;
}

textarea:focus {
    border: 1px solid #2c68f7;
}

textarea:hover {
    border: 1px solid #2c68f7;
}

textarea::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(41, 42, 46, 1);
    border-radius: 2px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(183, 183, 183, 1);
    border-radius: 2px;
}

.property {
    width: 100%;
    display: flex;
    align-items: center;
}

.item_name {
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: rgba(230, 230, 230, 1);
}

.readonly_flag {
    flex: 1;
}

.readonly_true {
    cursor: not-allowed;
    cursor: no-drop;
}

.checkbox1 {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    margin-left: 10px;
    margin-top: 2px;
}

.checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 1px solid rgba(230, 230, 230, 0.4);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
</style>
